<template>
  <view class="perfect-page">
	  <status-bar></status-bar>
    <!-- 顶部栏 -->
    <view class="perfect-topbar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <text class="header-title">完善信息</text>
    </view>

    <view class="perfect-content">

      <!-- 地址信息区域 -->
      <view class="form-section">

        <view class="form-item" @click="openAddressPicker">
          <text class="form-label">常驻地址：</text>
          <view class="form-input-area">
			  <view class="service-area-selector">
			    <text>{{ addressText }}</text>
			  </view>
          </view>
        </view>


        <view class="form-item">
          <text class="form-label">详细地址：</text>
          <view class="form-input-area">
            <view class="map-address-input">
              <uni-easyinput type="text" v-model="detailAddress" placeholder="请输入详细地址" />
            </view>
          </view>
        </view>
		
		
        <view class="form-item service-area-item" @click="openServiceAreaPicker">
          <text class="form-label">服务区域：</text>
          <view class="form-input-area">
            <view class="service-area-selector">
              <text>{{ serviceAreaLabel }}</text>
              <text class="arrow-down"></text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">服务距离：</text>
          <view class="form-input-area">
            <uni-easyinput type="number" v-model="serviceDistance" placeholder="请输入服务距离" />
          </view>

        </view>

        <view class="form-item">
          <text class="form-label">联系人姓名：</text>
          <view class="form-input-area">
            <uni-easyinput type="text" v-model="contactName" placeholder="请输入姓名" />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">联系人电话：</text>
          <view class="form-input-area">
            <uni-easyinput type="number" v-model="contactPhone" placeholder="请输入手机号" />
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">提现账户：</text>
          <view class="form-input-area">
            <uni-easyinput type="number" v-model="withdrawAccount" placeholder=" 请输入提现账户" />
          </view>
        </view>
      </view>

      <!-- 确定按钮 -->
      <view class="submit-btn" @click="handleSubmit">确定</view>
    </view>

    <!-- 地址选择器弹窗 -->
    <!-- <view class="address-picker" v-if="showAddressPicker"> -->
      <!-- 实际项目中可以使用第三方地址选择器组件 -->
    <!-- </view> -->

    <!-- 服务区域选择器弹窗 -->
    <!-- <view class="service-area-picker" v-if="showServiceAreaPicker"> -->
      <!-- 实际项目中可以使用第三方选择器组件 -->
	        <!-- <view class="area-item" 
	              v-for="area in serviceAreas" 
	              :key="area.value"
	              @click="selectServiceArea(area.value)">
	          <text>{{ area.label }}</text>
	          <text v-if="serviceArea === area.value" class="selected-icon">✓</text>
	        </view> -->
    <!-- </view> -->
    <view class="mask" 
          v-if="showServiceAreaPicker" 
          @click="showServiceAreaPicker = false">
      <view class="service-area-picker" @click.stop>
        <view class="picker-header">
          <view class="area-tabs">
            <view class="area-tab" 
                  :class="{ active: currentAreaTab === 'province' }"
                  @click="switchAreaTab('province')">
              省份
            </view>
            <view class="area-tab" 
                  :class="{ active: currentAreaTab === 'city', disabled: !selectedProvince }"
                  @click="selectedProvince && switchAreaTab('city')">
              城市
            </view>
            <view class="area-tab" 
                  :class="{ active: currentAreaTab === 'district', disabled: !selectedCity }"
                  @click="selectedCity && switchAreaTab('district')">
              区县
            </view>
          </view>
          <view class="confirm-btn-top" v-if="currentAreaTab === 'district' && selectedDistricts.length > 0" @click="confirmDistrictSelection">确定</view>
        </view>
        
        <!-- 省份列表 -->
        <view class="area-list" v-if="currentAreaTab === 'province'">
          <view class="area-item" 
                v-for="item in provinceList" 
                :key="item.value"
                @click="selectProvince(item)">
            <text>{{ item.label }}</text>
            <text v-if="selectedProvince && selectedProvince.value === item.value" class="selected-icon">✓</text>
          </view>
        </view>
        
        <!-- 城市列表 -->
        <view class="area-list" v-if="currentAreaTab === 'city'">
          <view class="area-item" 
                v-for="item in cityList" 
                :key="item.value"
                @click="selectCity(item)">
            <text>{{ item.label }}</text>
            <text v-if="selectedCity && selectedCity.value === item.value" class="selected-icon">✓</text>
          </view>
        </view>
        
        <!-- 区县列表（多选） -->
        <view class="area-list" v-if="currentAreaTab === 'district'">
          <view class="area-item" 
                v-for="item in districtList" 
                :key="item.value"
                @click="toggleDistrict(item)">
            <text>{{ item.label }}</text>
            <text v-if="isDistrictSelected(item.value)" class="selected-icon">✓</text>
          </view>
        </view>
      </view>
    </view>

	<!-- 常驻地址选择 -->
    <view class="mask" 
          v-if="showAddressPicker" 
          @click="showAddressPicker = false">
      <view class="service-area-picker" @click.stop>
        <view class="picker-header">
          <view class="area-tabs">
            <view class="area-tab" 
                  :class="{ active: currentAddressTab === 'province' }"
                  @click="switchAddressTab('province')">
              省份
            </view>
            <view class="area-tab" 
                  :class="{ active: currentAddressTab === 'city', disabled: !selectedAddressProvince }"
                  @click="selectedAddressProvince && switchAddressTab('city')">
              城市
            </view>
            <view class="area-tab" 
                  :class="{ active: currentAddressTab === 'district', disabled: !selectedAddressCity }"
                  @click="selectedAddressCity && switchAddressTab('district')">
              区县
            </view>
          </view>
        </view>
        
        <!-- 省份列表 -->
        <view class="area-list" v-if="currentAddressTab === 'province'">
          <view class="area-item" 
                v-for="item in addressProvinceList" 
                :key="item.value"
                @click="selectAddressProvince(item)">
            <text>{{ item.label }}</text>
            <text v-if="selectedAddressProvince && selectedAddressProvince.value === item.value" class="selected-icon">✓</text>
          </view>
        </view>
        
        <!-- 城市列表 -->
        <view class="area-list" v-if="currentAddressTab === 'city'">
          <view class="area-item" 
                v-for="item in addressCityList" 
                :key="item.value"
                @click="selectAddressCity(item)">
            <text>{{ item.label }}</text>
            <text v-if="selectedAddressCity && selectedAddressCity.value === item.value" class="selected-icon">✓</text>
          </view>
        </view>
        
        <!-- 区县列表 -->
        <view class="area-list" v-if="currentAddressTab === 'district'">
          <view class="area-item" 
                v-for="item in addressDistrictList" 
                :key="item.value"
                @click="selectAddressDistrict(item)">
            <text>{{ item.label }}</text>
            <text v-if="selectedAddressDistrict && selectedAddressDistrict.value === item.value" class="selected-icon">✓</text>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
import { addZjbMaster, getMyInfo , serviceArea } from '@/api/app/master/master.js'
import { selectAreasByParentId } from '@/api/app/master/area.js'


export default {
  onLoad(options) {
    // 接收页面参数，判断来源
    this.fromPage = options.from || '';
    console.log('页面来源:', this.fromPage);
    if (this.fromPage === 'login') {

    }


  },
  data() {
    return {
      fromPage: '', // 记录页面来源
	  id: 0,
      idCardFront: '',
      idCardBack: '',
      // 常驻地址相关数据
      province: '',
      city: '',
      district: '',
      detailAddress: '',
      addressText: '', // 用于显示在输入框中的地址文本
      locationInfo: null,
      latitude: 0,  // 默认纬度
      longitude: 0, // 默认经度
      
      // 服务区域相关数据
      serviceArea: '',
      serviceAreaLabel: '请选择服务区域', // 服务区域显示文本
      
      // 其他表单数据
      contactName: '',
      serviceDistance: '',
      contactPhone: '',
      withdrawAccount: '',
      frequentContacts: '',
      contactsPhone: '',
      
      // 弹窗控制
      showAddressPicker: false,
	  // 常规地址三级联动相关数据
	  currentAddressTab: 'province', // 当前选中的标签：province, city, district
	  addressProvinceList: [], // 省份列表
	  addressCityList: [], // 城市列表
	  addressDistrictList: [], // 区县列表
	  selectedAddressProvince: null, // 选中的省份
	  selectedAddressCity: null, // 选中的城市
	  selectedAddressDistrict: null, // 选中的区县
	  
	  
      showServiceAreaPicker: false,
      
      // 服务区域三级联动相关数据
      currentAreaTab: 'province', // 当前选中的标签：province, city, district
      provinceList: [], // 省份列表
      cityList: [], // 城市列表
      districtList: [], // 区县列表
      selectedProvince: {}, // 选中的省份
      selectedCity: {}, // 选中的城市
      selectedDistricts: [], // 选中的区县（多选）
      serviceAreas: [], // 服务区域ID列表（多选）
      maxDistrictCount:5,
    }
  },
  computed: {
      // 计算属性：根据常驻地址的省市区生成地址文本
      computedAddressText() {
        return `${this.province || ''} ${this.city || ''} ${this.district || ''}`.trim();
      }
  },
  created: function() {
    // 获取用户信息
      getMyInfo()
        .then(result => {
          console.log(result);
          if(result.data){
              
              const data = result.data;
			        this.id = data.id;
              this.addressText = data.masterAddress || '请选择地址';
              this.idCardFront = data.pictureFrontId;
              this.idCardBack = data.pictureBackId;
              this.district = data.masterCounty;
              this.city = data.masterCity;
              this.province = data.masterProvincial;
              this.detailAddress = data.masterAddress;
              // 设置服务区域
              this.serviceArea = data.serviceArea;
              
              // 如果有服务区域数据，可以尝试解析并设置选中的区县
              if (data.serviceArea) {
                // 这里可以根据实际情况解析服务区域数据
                // 例如，如果serviceArea是逗号分隔的区县ID列表
                // 可以在获取区县列表后设置selectedDistricts
              }
              this.contactName = data.masterName;
              this.serviceDistance = data.serviceDistance;
              this.contactPhone = data.masterPhone;
              this.withdrawAccount = data.aliAccount;
              this.serviceDistance = data.serviceDistance;
              this.frequentContacts = data.frequent_contacts;
              this.contactsPhone = data.contacts_phone;
              if(this.fromPage === 'login' && data.flag >= 0 ){
                    this.$store.dispatch('GetMasterInfo').then(res => {
                        this.$tab.reLaunch('/pages/index/index')
                      })
              }
                  
          }
        })

      

  },

  onShow(){
    // 获取服务区域 
        serviceArea().then(res=>{
            console.log(res); 
            if(res.code === 200){
                const data = res.data;
                if(data.districts){
                    this.selectedProvince.value = data.provinceCode;
                    this.selectedProvince.label = data.provinceName ;
                    this.selectedCity.value = data.cityCode;
                    this.selectedCity.label = data.cityName;
                    
                    for(var i=0;i<data.districts.length;i++){
                        var item = data.districts[i];
                        this.selectedDistricts.push(item);
                    }
                    this.updateServiceAreaLabel();
                   console.log(this.selectedDistricts);
                }
            }
                
          });
  },


  watch: {
    // 监听省市区变化，更新地址文本
    computedAddressText: {
      handler(newVal) {
        this.addressText = newVal;
      },
      immediate: true
    }
  },
  methods: {
    goBack() {
        // 默认行为，返回上一页
        uni.navigateBack();
    },
    
	// 切换常规地址选择标签
	switchAddressTab(tab) {
	  this.currentAddressTab = tab;
	},
	
	// 打开常规地址选择器
    openAddressPicker() {
      this.showAddressPicker = true;
	  this.currentAddressTab = 'province';
	  // 如果省份列表为空，则获取省份列表
	  if (this.addressProvinceList.length === 0) {
	    this.fetchProvinces(false);
	  }
      // 实际项目中可以调用地址选择器组件
    },
	
	// 选择常规地址省份
	selectAddressProvince(province) {
	  this.selectedAddressProvince = province;
	  this.selectedAddressCity = null;
	  this.selectedAddressDistrict = null;
	  this.cityList = [];
	  this.districtList = [];
	  
	  // 获取该省份下的城市列表
	  this.fetchCities(province.value, false);
	  
	  // 切换到城市选择标签
	  this.currentAddressTab = 'city';
	},
	
	// 选择常规地址城市
	selectAddressCity(city) {
	  this.selectedAddressCity = city;
	  this.selectedAddressDistrict = null;
	  this.districtAddressList = [];
	  
	  // 获取该城市下的区县列表
	  this.fetchDistricts(city.value, false);
	  
	  // 切换到区县选择标签
	  this.currentAddressTab = 'district';
	},
	
	// 选择常规地址地区
	selectAddressDistrict(district) {
	  this.selectedAddressDistrict = district;	  
	  // 更新服务区域标签
	  this.updateAddressLabel();
	  this.showAddressPicker = false;
	},
	
	updateAddressLabel() {
		if (this.selectedAddressProvince) {
		  this.province = this.selectedAddressProvince.label;
		}
		if (this.selectedAddressCity) {
		  this.city = this.selectedAddressCity.label;
		}
		if (this.selectedAddressDistrict) {
		  this.district = this.selectedAddressDistrict.label;
		}
	},

    // 打开地图选择器
    openMapSelector() {
      // 使用新的amap-selector页面
      uni.navigateTo({
        url: `/pages/common/amap-selector`
      });
    },

    // 设置位置信息（从地图选择器返回时调用）- 仅更新常驻地址相关数据
    setLocationInfo(location) {
      if (location) {
        console.log('location', location);
        this.locationInfo = location;
        this.latitude = location.latitude;
        this.longitude = location.longitude;

        // 更新常驻地址信息
        if (location.address) {
          this.detailAddress = location.address;
        }

        // 如果返回的位置包含省市区信息，也可以更新常驻地址的省市区
        if (location.province) {
          this.province = location.province;
        }
        if (location.city) {
          this.city = location.city;
        }
        if (location.district) {
          this.district = location.district;
        }
        
        // 更新地址文本
        this.addressText = `${this.province || ''} ${this.city || ''} ${this.district || ''} ${this.detailAddress || ''}`.trim();
      }
    },
    // 切换区域选择标签
    switchAreaTab(tab) {
      this.currentAreaTab = tab;
    },
    
    // 打开服务区域选择器
    openServiceAreaPicker() {
      this.showServiceAreaPicker = true;
      this.currentAreaTab = 'province';
      // 如果省份列表为空，则获取省份列表
      if (this.provinceList.length === 0) {
        this.fetchProvinces(true);
      }
    },
    
    // 获取省份列表
    fetchProvinces(isArea) {
      uni.showLoading({ title: '加载中...' });
      selectAreasByParentId({
        parentCode: 86
      })
        .then(res => {
          if (res.code === 200) {
			  const data = res.data.map(item => ({
              value: item.areaCode,
              label: item.areaName
            }));
			if(isArea) {
				this.provinceList = data;
			} else {
				this.addressProvinceList = data;
			}
          } else {
            uni.showToast({ title: res.msg || '获取省份列表失败', icon: 'none' });
          }
        })
        .catch(err => {
          console.error('获取省份列表失败:', err);
          uni.showToast({ title: '获取省份列表失败', icon: 'none' });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 获取城市列表
    fetchCities(provinceId, isArea) {
      uni.showLoading({ title: '加载中...' });
      selectAreasByParentId({
        parentCode: provinceId
      })
        .then(res => {
          if (res.code === 200) {
			  const data = res.data.map(item => ({
              value: item.areaCode,
              label: item.areaName
            }));
			if(isArea) {
				this.cityList = data;
			} else {
				this.addressCityList = data;
			}
          } else {
            uni.showToast({ title: res.msg || '获取城市列表失败', icon: 'none' });
          }
        })
        .catch(err => {
          console.error('获取城市列表失败:', err);
          uni.showToast({ title: '获取城市列表失败', icon: 'none' });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 获取区县列表
    fetchDistricts(cityId, isArea) {
      uni.showLoading({ title: '加载中...' });
      selectAreasByParentId({
        parentCode: cityId
      })
        .then(res => {
          if (res.code === 200) {
			  const data = res.data.map(item => ({
              value: item.areaCode,
              label: item.areaName
            }));
			if(isArea) {
				this.districtList = data;
			} else {
				this.addressDistrictList = data;
			}
          } else {
            uni.showToast({ title: res.msg || '获取区县列表失败', icon: 'none' });
          }
        })
        .catch(err => {
          console.error('获取区县列表失败:', err);
          uni.showToast({ title: '获取区县列表失败', icon: 'none' });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 选择省份 - 仅更新服务区域相关数据
    selectProvince(province) {
      this.selectedProvince = province;
      this.selectedCity = null;
      this.selectedDistricts = []; // 清空已选区县
      this.cityList = [];
      this.districtList = [];
      
      // 更新服务区域标签
      this.updateServiceAreaLabel();
      
      // 获取该省份下的城市列表
      this.fetchCities(province.value, true);
      
      // 切换到城市选择标签
      this.currentAreaTab = 'city';
    },
    
    // 选择城市 - 仅更新服务区域相关数据
    selectCity(city) {
      this.selectedCity = city;
      this.selectedDistricts = []; // 清空已选区县
      this.districtList = [];
      
      // 更新服务区域标签
      this.updateServiceAreaLabel();
      
      // 获取该城市下的区县列表
      this.fetchDistricts(city.value, true);
      
      // 切换到区县选择标签
      this.currentAreaTab = 'district';
    },
    
    // 切换区县选择状态（多选）
    toggleDistrict(district) {
      const index = this.selectedDistricts.findIndex(item => item.value === district.value);
      if (index > -1) {
        // 如果已选中，则取消选中
        this.selectedDistricts.splice(index, 1);
      } else {
        // 如果未选中，则添加到选中列表
        if (this.maxDistrictCount > 0 && this.selectedDistricts.length >= this.maxDistrictCount) {
          uni.showToast({ title: `最多只能选择${this.maxDistrictCount}个区县`, icon: 'none' });
          return;
        }
        this.selectedDistricts.push(district);
      }
    },
    
    // 检查区县是否被选中
    isDistrictSelected(value) {
      return this.selectedDistricts.some(item => item.value === value);
    },
    
    // 确认区县选择
    confirmDistrictSelection() {
      if (this.selectedDistricts.length === 0) {
        uni.showToast({ title: '请至少选择一个区县', icon: 'none' });
        return;
      }
      // 更新服务区域值（多个区县ID用逗号分隔）
      this.serviceArea = this.selectedDistricts.map(item => item.value).join(',');
      // 更新服务区域标签
      this.updateServiceAreaLabel();
      
      // 关闭选择器
      this.showServiceAreaPicker = false;
    },
    
    // 更新服务区域显示文本 - 仅使用服务区域相关数据
    updateServiceAreaLabel() {
      if (this.selectedProvince && this.selectedCity && this.selectedDistricts.length > 0) {
        const districtLabels = this.selectedDistricts.map(item => item.label).join('、');
        this.serviceAreaLabel = `${this.selectedProvince.label} ${this.selectedCity.label} ${districtLabels}`;
      } else if (this.selectedProvince && this.selectedCity) {
        this.serviceAreaLabel = `${this.selectedProvince.label} ${this.selectedCity.label}`;
      } else if (this.selectedProvince) {
        this.serviceAreaLabel = this.selectedProvince.label;
      } else {
        this.serviceAreaLabel = '请选择服务区域';
      }
    },
    
    // 验证手机号格式
    validatePhone(phone) {
      const phoneReg = /^1[3-9]\d{9}$/;
      return phoneReg.test(phone);
    },
    handleSubmit() {
      // 表单验证
      if (!this.detailAddress) {
        return uni.showToast({ title: '请填写详细地址', icon: 'none' });
      }
     
      if (!this.contactName) {
        return uni.showToast({ title: '请填写联系人姓名', icon: 'none' });
      }
      if (!this.contactPhone) {
        return uni.showToast({ title: '请填写联系人电话', icon: 'none' });
      }
      if (!this.validatePhone(this.contactPhone)) {
        return uni.showToast({ title: '请输入正确的手机号格式', icon: 'none' });
      }
      if (!this.withdrawAccount) {
        return uni.showToast({ title: '请填写提现账户', icon: 'none' });
      }

      // 提交表单
      uni.showLoading({ title: '提交中...' });
      
      // 获取服务区域区县显示文本（用于展示）
      const serviceDistrictLabels = this.selectedDistricts.map(item => item.label).join('、');
      


      addZjbMaster({
		  id: this.id,
          pictureFrontId: this.idCardFront,
          pictureBackId: this.idCardBack,
          // 常驻地址信息
          masterProvincial: this.province,
          masterCity: this.city,
          masterCounty: this.district, // 常驻地址的区县
          masterAddress: this.detailAddress,
          // 其他信息
          masterName: this.contactName,
          // masterPhone: this.contactPhone,
          aliAccount: this.withdrawAccount,
          serviceDistance: this.serviceDistance,
          longitude: this.longitude,
          latitude: this.latitude,
          frequentContacts: this.contactName,
          contactsPhone: this.contactPhone,
          // 服务区域信息
          serviceArea: this.serviceArea, // 使用区县ID的拼接字符串

          area: {
              provinceCode: this.selectedProvince.value,
              provinceName: this.selectedProvince.label,
              cityCode: this.selectedCity.value,
              cityName: this.selectedCity.label,
              districts: this.selectedDistricts.map(item => ({
                  value: item.value,
                  label: item.label
              })),
          }


        }).then(() => {
          uni.hideLoading();
          uni.showToast({ title: '提交成功', icon: 'success' });

          this.$store.dispatch('GetMasterInfo').then(res => {
            this.$tab.reLaunch('/pages/index/index')
          })


          // setTimeout(() => {
          //   // 根据来源页面决定提交后的跳转行为
          //   if (this.fromPage === 'login') {
          //     // 如果是从注册页面来的，提交后跳转到首页
          //     uni.switchTab({
          //       url: '/pages/index/index'
          //     });
          //   } else {
          //     // 其他情况，返回上一页
          //     uni.navigateBack();
          //   }
          // }, 1000);
        })    
    }
  }
}
</script>

<style lang="scss" scoped>
.perfect-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.perfect-topbar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.header-title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
}

.perfect-content {
  padding: 30rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.form-item {
  display: flex;
  margin-bottom: 30rpx;
}

.form-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 80rpx;
}

.form-input-area {
  flex: 1;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 4rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.map-address-input {
  position: relative;
  width: 100%;
}

.map-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #0088ff;
}

.address-selector {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 4rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.province-selector,
.city-selector,
.district-selector {
  display: inline-flex;
  align-items: center;
  margin-right: 10rpx;
}

.service-area-selector {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.arrow-down {
  color: #999;
  font-family: "iconfont";
}

.address-right-icon {
  padding: 0 10rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}

/* 弹窗样式 */
.address-picker,
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.service-area-picker {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 30rpx;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.service-area-picker-enter-active, .service-area-picker-leave-active {
  transition: transform 0.3s ease;
}
.service-area-picker-enter, .service-area-picker-leave-to {
  transform: translateY(100%);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.area-tabs {
  display: flex;
  flex: 1;
}

.area-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  position: relative;
}

.confirm-btn-top {
  background-color: #0088ff;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-right: 10rpx;
}

.area-tab.active {
  color: #0088ff;
}

.area-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #0088ff;
}

.area-tab.disabled {
  color: #ccc;
}

.area-list {
  max-height: 60vh;
  overflow-y: auto;
}

.area-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
}

.selected-icon {
  color: #0088ff;
}

.service-area-item {
  /* 保持与其他form-item一致的样式 */
}

.service-area-selector {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff; /* 使用白色背景与其他输入框一致 */
}

.area-item:active {
  background-color: #f5f5f5; /* 使用更柔和的点击效果 */
}

/* 区县多选相关样式 */
.district-actions {
  margin-top: 20rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: center;
}

.confirm-btn {
  background-color: #0088ff;
  color: #fff;
  padding: 15rpx 60rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}

/* 选中的区县项样式 */
.area-item.selected {
  background-color: #e8f4ff;
}
</style>